<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Illustrious 角色提示词查询系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="web/index.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid main-container">
        <div class="row">
            <!-- 功能区 -->
            <div class="col-lg-8">
                <div class="left-panel">
                    <h2 class="mb-4">
                        <i class="fas fa-search text-primary"></i>
                        角色搜索
                        <span id="loadingStatus" class="fs-6 text-success d-none">
                            <i class="fas fa-check-circle"></i> 预览图加载完毕
                        </span>
                    </h2>
                    
                    <div class="search-container">
                        <input type="text" 
                               class="search-input" 
                               id="searchInput" 
                               placeholder="请输入角色名称进行搜索..."
                               autocomplete="off">
                        <button class="search-btn" id="searchBtn">
                            <i class="fas fa-search"></i>
                            搜索
                        </button>
                    </div>

                    <div id="resultsContainer" class="results-container">
                        <div class="loading">
                            <i class="fas fa-search fa-2x mb-3 text-muted"></i>
                            <p>请输入角色名称开始搜索</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧区域 -->
            <div class="col-lg-4">
                <div class="right-panel">
                    <h3 class="mb-4">
                        <i class="fas fa-image text-primary"></i>
                        图片预览
                    </h3>
                    
                    <div id="rightImageContainer" class="right-image-container">
                        <div class="no-results">
                            <i class="fas fa-image fa-2x mb-3 text-muted"></i>
                            <p>请选择角色查看预览图</p>
                        </div>
                    </div>
                    
                    <div class="copyright">
                        <small>by <a href="https://space.bilibili.com/86766295" target="_blank">摸鱼仙人</a></small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="web/index.js"></script>
</body>
</html>